<template>
    <div id="investMoney">
        <div class="insert-cash">充值金额</div>
        <div class="bing">
            绑定小区信息，可享受充值优惠
            <van-button round type="info" class="buy" size="mini">购买</van-button>
        </div>
        <div class="tab-content van-clearfix">
            <div class="tab-cont">
                <div class="tab-money">
                    充100元
                    <div class="tab-tex">绑定小区可享受优惠</div>
                </div>
            </div>
            <div class="tab-cont">
                <div class="tab-money">
                    充100元
                    <div class="tab-tex">绑定小区可享受优惠</div>
                </div>
            </div>
        </div>
        <div class="tab-content van-clearfix">
            <div class="tab-cont">
                <div class="tab-money">
                    充100元
                    <div class="tab-tex">绑定小区可享受优惠</div>
                </div>
            </div>
            <div class="tab-cont">
                <div class="tab-money">
                    充100元
                    <div class="tab-tex">绑定小区可享受优惠</div>
                </div>
            </div>
        </div>
        <div class="foot-btn-cont">
            <van-button round type="info" size="large">去支付</van-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "investMoney",
        data() {
            return {}
        },
        mounted() {
        },
        methods: {}
    }
</script>

<style scoped lang="scss">
    #investMoney {
        font-size: 12px;
        padding: 16px 20px;
        .insert-cash {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 8px;
        }
        .bing {
            font-size: 14px;
            position: relative;
            background: #deeefe;
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            border-radius: 6px;
            letter-spacing: 4px;
            .buy {
                position: absolute;
                right: 20px;
                top: 9px;
            }
        }
        .tab-content {
            margin-top: 20px;
            font-size: 0;
            .tab-cont {
                &:nth-child(2) {
                    float: right;
                }
                display: inline-block;
                position: relative;
                text-align: center;
                height: 1.6rem;
                line-height: 1.6rem;
                width: 4rem;
                border: 1px solid #b8bdc7;
                color: #b8bdc7;
                font-size: 22px;
                border-radius: 10px;
                .tab-tex {
                    height: 20px;
                    position: absolute;
                    border-bottom-left-radius: 16px;
                    border-top-left-radius: 16px;
                    border-top-right-radius: 16px;
                    background: #b8bdc7;
                    color: #fff;
                    font-size: 12px;
                    top: -10px;
                    right: -2px;
                    width: 120px;
                    line-height: 20px;
                    text-align: center;
                }
            }
        }
        .foot-btn-cont {
            position: fixed;
            bottom: 2.5rem;
            text-align: center;
            width: 90%;
        }
    }
</style>
